<template>
  <div class="search-con">
    <div class="s-box">
      <p class="search-type">
        <span v-for="(item, index) in searchTypeOptions" :key="index" :class="{active: searchType===item.value}" @click="handleChangeSearchType(item)">{{item.name}}</span>
      </p>
      <div class="search-box">
        <el-input placeholder="请输入关键词查询" v-model="searchTxt" @keydown.enter.native="search" class="elinp">
          <i class="iconfont" slot="prefix">&#xe600;</i>
        </el-input>
        <el-button slot="append" @click="search" class="search-button">搜索</el-button>
      </div>
      <div class="hot">
        <span class="tit">热门关键词：</span>
        <p class="cont">
          <span v-for="(item, index) in hotOptions" :key="index" @click="handleChangeHot(item)">{{item.name}}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTxt: '',
      searchType: 0,
      searchTypeOptions: [
        {name: '综合', value: 0},
        {name: '专利', value: 1},
        {name: '文献', value: 2},
        {name: '成果', value: 3},
        {name: '标准', value: 4},
        {name: '企业', value: 5},
        {name: '人才', value: 6},
        {name: '政策', value: 7},
        {name: '资讯', value: 8},
        {name: '项目', value: 9},
      ],
      hotOptions: [
        {name: '碲化镉薄膜太阳能电池'},
        {name: '固态电池'},
        {name: '新能源发电'},
      ]
    }
  },
  methods: {
    search() {
      // if (this.searchTxt === '') {
      //   this.$message({
      //     type: 'warning',
      //     message: '请输入关键词查询',
      //     duration: 1000
      //   })
      //   return
      // }
      this.$router.push({
        name: 'IRSearchResult',
        query: {
          keyword: this.searchTxt,
          type: this.searchType
        }
      })
    },
    handleChangeSearchType(item) {
      this.searchType = item.value
    },
    handleChangeHot(item) {
      this.searchTxt = item.name
      this.search()
    }
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
.search-con {
  position: absolute;
  top: .7rem;
  left: 0;
  width: 100%;
  height: calc(100vh - .7rem);
  min-height: 6.7rem;
  background: url('../../../../assets/img/search-bg.png');
  background-size: cover;
	background-repeat: no-repeat;
}
.s-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9.3rem;
  margin-top: -1.6rem;
  margin-left: -4.65rem;
  .search-type {
    padding-left: .1rem;
    margin-bottom: .14rem;
    font-size: .16rem;
    color: $color20;
    span {
      display: inline-block;
      margin-right: .24rem;
      color: $color16;
      cursor: pointer;
      &.active {
        color: $mainColor;
      }
    }
  }
  .search-box {
    position: relative;
    width: 100%;
    display: flex;
    .elinp {
      position: relative;
      ::v-deep {
        .el-input__inner {
          height: 0.54rem;
          line-height: 0.54rem;
          padding-left: 0.76rem;
          border-color: $mainColor;
          border-radius: 0.08rem;
          font-size: 0.18rem;
          color: #283146;
          &:focus {
            border-color: $mainColor;
          }
        }
        .el-input__prefix {
          height: 0.32rem;
          width: 0.60rem;
          line-height: 0.32rem;
          border-right: 1px solid #dbdef2;
          margin-top: 0.12rem;
          i {
            font-size: 0.3rem;
            color: $mainColor;
            font-weight: 700;
          }
        }
      }
      .search-icon {
        position: absolute;
        top: 0;
      }
    }
    .search-button {
      width: 0.94rem;
      height: 0.54rem;
      border-radius: 0.08rem;
      font-size: 0.18rem;
      color: #fff;
      background-color: $mainColor;
      margin-left: 0.14rem;
    }
  }
  .hot {
    position: relative;
    line-height: .3rem;
    padding: .1rem;
    margin-top: .2rem;
    font-size: .16rem;
    .tit {
      display: inline-block;
      margin-right: .1rem;
      color: $color16;
    }
    .cont {
      display: inline-block;
      span {
        display: inline-block;
        padding: 0 .09rem;
        margin-right: .1rem;
        color: $color62;
        background-color: rgba(255,236,202,.5);
        cursor: pointer;
        &:hover {
          background-color: $color63;
        }
      }
    }
  }
}
</style>